<!--
 * 单元格组件
-->
<template>
    <page-layout class="page-layout">
        <!-- 基础使用 -->
        <app-demo-module title="基础使用">
            <pure-block>
                <view class="block">默认宽高比 1:1</view>
            </pure-block>
        </app-demo-module>

        <!-- 自定义宽高比 -->
        <app-demo-module title="自定义宽高比">
            <pure-block ratio="18:9">
                <view class="block">18:9</view>
            </pure-block>
            <app-gap size="10px"></app-gap>
            <pure-block ratio="9/18">
                <view class="block">9:18</view>
            </pure-block>
        </app-demo-module>
    </page-layout>
</template>

<script setup>
    import { ref, computed } from "vue";
</script>

<style scoped lang="scss">
    .block {
        width: 100%;
        height: 100%;
        background: #2c313c;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-weight: 700;
    }
</style>
